<template>
  <swiper v-if="banners.length>0" :options="swiperOption">
    <swiper-slide v-for="(banner, index) in banners" :key="index">
      <router-link :to="{name:'Article',params:{bloggerId:banner.bloggerId}}">
        <img :src="banner.articlePic" alt class="bannerImg">
      </router-link>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      swiperOption: {
        autoplay: true,
        pagination: {
          el: ".swiper-pagination"
        },
        loop: true
      }
    };
  },
  props: {
    banners: {
      type: Array,
      default: function(){
        return [];
      }
    }
  }
}
</script>
<style scoped>
 .bannerImg{
   height: 100%;
   width: 100%;
   border-radius: 8px;
 }
</style>


